<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我们的宿舍</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">

</head>
<style>
    body {
        font-family: 'Arial', sans-serif;
        background-color: #f8f9fa;
        color: #333;
        padding: 20px;
    }

    h1 {
        text-align: center;
        color: #ff7e5f;
        margin-bottom: 30px;
    }

    .diary-entry {
        background: #fff;
        border-radius: 10px;
        padding: 20px;
        margin-bottom: 20px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .diary-entry h3 {
        color: #ff7e5f;
        margin-bottom: 10px;
    }

    .diary-entry p {
        margin: 5px 0;
    }

    .form-container {
        background: #fff;
        border-radius: 10px;
        padding: 20px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        margin-top: 30px;
    }

    .form-container label {
        font-weight: bold;
    }

    .form-container textarea {
        resize: vertical;
    }

    .clear-button {
        margin-top: 20px;
        text-align: center;
    }

    .memory-card {
        background: #fff;
        border-radius: 10px;
        padding: 20px;
        margin-bottom: 20px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .memory-card h3 {
        color: #ff7e5f;
        margin-bottom: 10px;
    }

    .memory-card p {
        margin: 5px 0;
    }

    .wish-card {
        background: #fff;
        border-radius: 10px;
        padding: 20px;
        margin-bottom: 20px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .wish-card h3 {
        color: #ff7e5f;
        margin-bottom: 10px;
    }

    .wish-card p {
        margin: 5px 0;
    }
</style>

<body>

    <header class="bg-primary text-white text-center py-3">
        <div class="container">
            <h1 class="display-4">宿舍故事</h1>
            <nav class="navbar navbar-expand-lg navbar-dark">
                <div class="container-fluid">
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarNav">
                        <ul class="navbar-nav mx-auto">
                            <li class="nav-item"><a class="nav-link active" href="index.html">首页</a></li>
                            <li class="nav-item"><a class="nav-link" href="chengyuan.html">宿舍成员</a></li>
                            <li class="nav-item"><a class="nav-link" href="shenghuo.html">宿舍生活</a></li>
                            <li class="nav-item"><a class="nav-link" href="gushi.html">宿舍故事</a></li>
                            <li class="nav-item"><a class="nav-link" href="guanyv.html">关于我们</a></li>
                        </ul>
                    </div>
                </div>
            </nav>
        </div>
    </header>
    <main>
        <div class="container">
            <!-- 标题 -->
            <h1>宿舍日记</h1>

            <!-- 日记展示区域 -->
            <div id="diary-entries">
                <!-- 日记内容会动态加载到这里 -->
            </div>

            <!-- 添加新日记的表单 -->
            <div class="form-container">
                <h2>添加新日记</h2>
                <form id="diary-form">
                    <div class="mb-3">
                        <label for="date" class="form-label">日期</label>
                        <input type="date" class="form-control" id="date" required>
                    </div>
                    <div class="mb-3">
                        <label for="author" class="form-label">记录人</label>
                        <input type="text" class="form-control" id="author" required>
                    </div>
                    <div class="mb-3">
                        <label for="weather" class="form-label">天气</label>
                        <select class="form-control" id="weather" required>
                            <option value="☀️">晴天</option>
                            <option value="🌧️">雨天</option>
                            <option value="⛅">阴天</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="mood" class="form-label">心情</label>
                        <select class="form-control" id="mood" required>
                            <option value="😊">开心</option>
                            <option value="😄">兴奋</option>
                            <option value="😅">紧张</option>
                            <option value="😡">生气</option>
                            <option value="😭">难过</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="events" class="form-label">今日事件</label>
                        <textarea class="form-control" id="events" rows="3" required></textarea>
                    </div>
                    <div class="mb-3">
                        <label for="feelings" class="form-label">我的感受</label>
                        <textarea class="form-control" id="feelings" rows="3" required></textarea>
                    </div>
                    <div class="mb-3">
                        <label for="plans" class="form-label">明日计划</label>
                        <textarea class="form-control" id="plans" rows="2" required></textarea>
                    </div>
                    <div class="mb-3">
                        <label for="funny-moments" class="form-label">宿舍趣事</label>
                        <textarea class="form-control" id="funny-moments" rows="2" required></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary">提交日记</button>
                </form>
            </div>

            <!-- 清空列表按钮 -->
            <div class="clear-button">
                <button id="clear-list" class="btn btn-danger">清空列表</button>
            </div>
        </div>
        <div class="container">
            <!-- 标题 -->
            <h1>宿舍回忆</h1>

            <!-- 回忆展示区域 -->
            <div id="memories">
                <!-- 回忆内容直接写在这里 -->
                <div class="memory-card">
                    <h3>2023-09-10-初识</h3>
                    <p>大学的第一天，我怀着激动的心情走进了宿舍。房间里已经有两位室友在整理床铺了。大家互相介绍后，我发现我们来自不同的地方，性格也各不相同。之后舍友也陆续到达并互相介绍起来。</p>
                </div>

                <div class="memory-card">
                    <h3>2023-09-10至如今-日常</h3>
                    <p>之后的我们经常一起上课，一起吃饭。在宿舍欢声笑语，时常也讨论课上的学到的知识。</p>
                </div>
            </div>
        </div>

        <div class="container">
            <!-- 标题 -->
            <h1>宿舍成员对未来的期许或祝福</h1>

            <!-- 期许和祝福展示区域 -->
            <div id="wishes">
                <!-- 宿舍成员的期许和祝福 -->
                <div class="wish-card">
                    <h3>陈书梁</h3>
                    <p>开豪车，住豪宅。</p>
                </div>

                <div class="wish-card">
                    <h3>徐光宗</h3>
                    <p>自由的活着！</p>
                </div>

                <div class="wish-card">
                    <h3>钟宏贺</h3>
                    <p>生于安乐，死于安乐！</p>
                </div>

                <div class="wish-card">
                    <h3>司德超</h3>
                    <p>春有百花秋有月，夏有凉风冬有雪。</p>
                </div>

                <div class="wish-card">
                    <h3>陈世辉</h3>
                    <p>谋事在人，成事在天！</p>
                </div>
            </div>
        </div>
    </main>

    <footer class="bg-dark text-white text-center py-3">
        <p>&copy; 2025 我们的宿舍. 版权所有.</p>
        <p>联系方式: 1928946480@qq.com</p>
    </footer>

    <script>
        // 从 LocalStorage 加载日记数据
        function loadDiaryEntries() {
            const entries = localStorage.getItem("diaryEntries");
            return entries ? JSON.parse(entries) : [];
        }

        // 保存日记数据到 LocalStorage
        function saveDiaryEntries(entries) {
            localStorage.setItem("diaryEntries", JSON.stringify(entries));
        }

        // 清空日记数据
        function clearDiaryEntries() {
            localStorage.removeItem("diaryEntries");
            diaryEntries = [];
            renderDiary();
        }

        // 日记数据（从 LocalStorage 加载或初始化）
        let diaryEntries = loadDiaryEntries();

        // 渲染日记
        function renderDiary() {
            const diaryContainer = document.getElementById("diary-entries");
            diaryContainer.innerHTML = diaryEntries.map(entry => `
                <div class="diary-entry">
                    <h3>${entry.date} - ${entry.author}</h3>
                    <p><strong>天气：</strong>${entry.weather}</p>
                    <p><strong>心情：</strong>${entry.mood}</p>
                    <p><strong>今日事件：</strong>${entry.events}</p>
                    <p><strong>我的感受：</strong>${entry.feelings}</p>
                    <p><strong>明日计划：</strong>${entry.plans}</p>
                    <p><strong>宿舍趣事：</strong>${entry.funnyMoments}</p>
                </div>
            `).join("");
        }

        // 添加新日记
        document.getElementById("diary-form").addEventListener("submit", function (e) {
            e.preventDefault();
            const newEntry = {
                date: document.getElementById("date").value,
                author: document.getElementById("author").value,
                weather: document.getElementById("weather").value,
                mood: document.getElementById("mood").value,
                events: document.getElementById("events").value,
                feelings: document.getElementById("feelings").value,
                plans: document.getElementById("plans").value,
                funnyMoments: document.getElementById("funny-moments").value
            };
            diaryEntries.push(newEntry);
            saveDiaryEntries(diaryEntries); // 保存到 LocalStorage
            renderDiary();
            this.reset(); // 清空表单
        });

        // 清空列表
        document.getElementById("clear-list").addEventListener("click", function () {
            if (confirm("确定要清空所有日记吗？")) {
                clearDiaryEntries();
            }
        });

        // 初始化渲染
        renderDiary();
    </script>
</body>

</html>